<template>
  <div class="waveWrapper waveAnimation">
    <div class="waveWrapperInner bgTop">
      <div
        class="wave waveTop"
        style="background-image: url('/img/wave-top.png')"
      ></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div
        class="wave waveMiddle"
        style="background-image: url('/img/wave-mid.png')"
      ></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div
        class="wave waveBottom"
        style="background-image: url('/img/wave-bot.png')"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  setup() {},
};
</script>
<style lang="sass" scoped>
@keyframes move_wave
    0%
        transform: translateX(0) translateZ(0) scaleY(1)

    50%
        transform: translateX(-25%) translateZ(0) scaleY(0.55)

    100%
        transform: translateX(-50%) translateZ(0) scaleY(1)

.waveWrapper
    width:100%
    height:100%
    overflow: hidden
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    margin: auto


    &Inner
        position: absolute
        width: 100%
        overflow: hidden
        height: 100%
        bottom: -1px
        background-image: linear-gradient(to top, #86377b 20%, #27273c 80%)

.bgTop
    z-index: 15
    opacity: 0.5

.bgMiddle
    z-index: 10
    opacity: 0.75

.bgBottom
    z-index: 5

.wave
    position: absolute
    left: 0
    width: 200%
    height: 100%
    background-repeat: repeat no-repeat
    background-position: 0 bottom
    transform-origin: center bottom


    &Top
        background-size: 50% 100px


    &Animation .waveTop
        animation: move-wave 3s
        -webkit-animation: move-wave 3s
        -webkit-animation-delay: 1s
        animation-delay: 1s


    &Middle
        background-size: 50% 120px


    &Animation .waveMiddle
        animation: move_wave 10s linear infinite


    &Bottom
        background-size: 50% 100px


    &Animation .waveBottom
        animation: move_wave 15s linear infinite
</style>